import React, { Component } from 'react';
import { Modal, Tree  } from 'antd';
import './permission.less';

import * as sysApi from 'common/api/SysApi.js';

const TreeNode = Tree.TreeNode;

/**
 * 角色权限设置
 */
class Permission extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	id: "",
	    	data: [],
	    	update: false,
		    checkedKeys: [],
		    selectedKeys: [],
	    }
	}
	
	componentDidMount(){
		this.fetch(this.props.id);
	}
	
	componentWillReceiveProps(nextProps) {
		this.fetch(nextProps.id);
	}
	
	//请求数据
	fetch = (id) => {
		if(id){
			sysApi.sysRolePermission({
				roleId: id
			}).then(result => {
				if(result && result.code == 20000){
					this.setState({
						id: id,
						data: result.data.list,
						checkedKeys: result.data.select
					})
				}
			})
		}
	}
	
	//保存
	save = () => {
		const { id, update, selectedKeys } = this.state;
		if(selectedKeys && selectedKeys.length > 0){
			sysApi.sysRolePermissionEdit({
				roleId: id,
				menuIds: selectedKeys
			}).then(result => {
				if(result && result.code == 20000){
					this.props.permissionClose(true);
				}
			})
		}else if(update){
			sysApi.sysRolePermissionEdit({
				roleId: id,
				menuIds: selectedKeys
			}).then(result => {
				if(result && result.code == 20000){
					this.props.permissionClose(true);
				}
			})
		}
	}
	
	//取消
	cancel = () => {
		this.props.permissionClose(false);
	}
	
	//是否在数组中
	isInArray = (arr,value) => {
	    for(var i = 0; i < arr.length; i++){
	        if(value === arr[i]){
	            return true;
	        }
	    }
	    return false;
	}
	
	//选中节点事件
  	onCheck = (checkedKeys, e) => {
	    var nodes = e.checkedNodes;
	    var ids = [];
	    nodes.map((item, index) => {
	    	if(item.props.dataRef.level == 2){
	    		ids.push(item.props.dataRef.value);
	    		if(!this.isInArray(ids, item.props.dataRef.parentValue)){
	    			ids.push(item.props.dataRef.parentValue);
	    		}
	    	}
	    })
	    this.setState({ 
	    	checkedKeys: checkedKeys,
	    	selectedKeys: ids,
	    	update: true
	    });
  	}
  	
  	//树节点
  	renderTreeNodes = (data) => {
	    return data.map((item) => {
	      if (item.data) {
	        return (
	          <TreeNode title={item.title} key={item.value} dataRef={item}>
	            {this.renderTreeNodes(item.data)}
	          </TreeNode>
	        );
	      }
	      return <TreeNode {...item} />;
	    });
  	}
	
	render(){
		const { data, checkedKeys } = this.state;
		const { permissionVisible } = this.props;
		return(
			<Modal
	          title={"角色权限"}
	          maskClosable={false}
	          keyboard={false}
	          destroyOnClose={true}
	          bodyStyle={{height: '400px',overflowY: 'scroll'}}
	          visible={permissionVisible}
	          okText={"保存"}
	          onOk={this.save.bind(this)}
	          cancelText={"取消"}
			  onCancel={this.cancel.bind(this)}>
				{
					data && data.length > 0 &&
					<Tree
				        checkable
				        defaultExpandAll
				        onCheck={this.onCheck}
				        checkedKeys={checkedKeys}>
				        {this.renderTreeNodes(data)}
			      	</Tree>
				}
			</Modal>
		)
	}
}

export default Permission;